'use client';

import { useContext, useState } from "react";
import EditableInput from "./EditableInput";
import { Menu, MenuButton, MenuItem, MenuList, useBoolean, Flex, Box } from "@chakra-ui/react";
import { MainContext } from "@/src/providers/MainProvider";

function EditItem({name, onChange = () => {}, onDelete = () => {}}:{name: string, onChange?: (value: string) => void, onDelete?: () => void}) {

    const [edit, setEdit] = useBoolean()
    const finishEdit = (value: string) => {
        setEdit.off();
        onChange(value);
    }
    const {t} = useContext(MainContext);

    return (
        <Flex alignItems="center" justifyContent="space-between" w="100%" minH="32px">
            <Box flex="1" minW="0" mr={2}>
                <EditableInput value={name} isEditMode={edit} startEdit={setEdit.on} finishEdit={finishEdit}/>
            </Box>
            <Box flexShrink={0}>
                <Menu>
                    <MenuButton className="hover:cursor-context-menu">
                        <svg className="w-5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26745" width="32" height="32">
                            <path d="M512 128c-46.933333 0-85.333333 38.4-85.333333 85.333333s38.4 85.333333 85.333333 85.333334 85.333333-38.4 85.333333-85.333334-38.4-85.333333-85.333333-85.333333z m0 597.333333c-46.933333 0-85.333333 38.4-85.333333 85.333334s38.4 85.333333 85.333333 85.333333 85.333333-38.4 85.333333-85.333333-38.4-85.333333-85.333333-85.333334z m0-298.666666c-46.933333 0-85.333333 38.4-85.333333 85.333333s38.4 85.333333 85.333333 85.333333 85.333333-38.4 85.333333-85.333333-38.4-85.333333-85.333333-85.333333z" p-id="26746" fill="#aaaaaa"></path>
                        </svg>
                    </MenuButton>
                    <MenuList minW={"5rem"} p={0} overflow={"hidden"} className="font-normal text-md !text-gray-800">
                        <MenuItem onClick={() => setEdit.on()}>{t('506')}</MenuItem>
                        <MenuItem onClick={() => onDelete && onDelete()}>{t('505')}</MenuItem>
                    </MenuList>
                </Menu>
            </Box>
        </Flex>
    );
}

export default EditItem;